import React, { useCallback } from 'react';
import { Form, Input, Button, Space, Radio } from 'antd';

const wrapperCol = { offset: 8, span: 16 };
interface FormBoxProps {
  onSearch: (value: any) => void;
  onReset: () => void;
}

const FormBox: React.FC<FormBoxProps> = ({ onSearch, onReset }) => {
  const [form] = Form.useForm();

  const handleFinish = useCallback((values: any) => {
    onSearch(values);
  }, []);

  const handleReset = useCallback(() => {
    form.resetFields();
    onReset();
  }, [form]);

  return (
    <Form form={form} layout="inline" onFinish={handleFinish}>
      <Form.Item label="商品名" name="goods_title">
        <Input />
      </Form.Item>

      <Form.Item label="评级" name="rate">
        <Radio.Group>
          <Radio.Button value={1}>好评</Radio.Button>
          <Radio.Button value={2}>中评</Radio.Button>
          <Radio.Button value={3}>差评</Radio.Button>
        </Radio.Group>
      </Form.Item>

      <Form.Item wrapperCol={wrapperCol} className="btnStyle">
        <Space>
          <Button onClick={handleReset}>重置</Button>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default FormBox;
